<template>
  <div v-if="cDetails">
    <el-drawer
      :title="detailsData.name"
      :visible.sync="cDetails"
      :close-on-press-escape="false"
      :wrapperClosable="false"
      direction="rtl"
    >
      <div class="drawer_pad">
        <div style="overflow: auto; width: 100%">
          <table style="font-size: 12px; white-space: nowrap">
            <tr style="color: #75829e">
              <td style="width: 260px"><span>企业</span></td>
              <td style="width: 230px"><span>电话</span></td>
              <td style="width: 100px"><span>跟进人</span></td>
              <td style="width: 100px"><span>共享人</span></td>
              <td style="width: 100px"><span>今日沟通消息数</span></td>
            </tr>
            <tr>
              <td>
                <div
                  v-if="isreturn == 0"
                  class="edit_btn"
                  @click="detailscustomer()"
                >
                  <span :title="detailsData.customer_name">{{
                    detailsData.customer_name !== ""
                      ? detailsData.customer_name
                      : "--"
                  }}</span>
                </div>
                <div v-else>
                  <span :title="detailsData.customer_name">{{
                    detailsData.customer_name !== ""
                      ? detailsData.customer_name
                      : "--"
                  }}</span>
                </div>
              </td>
              <td>{{ detailsData.phone !== "" ? detailsData.phone : "--" }}</td>
              <td>{{ detailsData.owner_user }}</td>
              <td
                class="operable"
                style="display: flex; align-items: center"
                @click="setshare"
              >
                <img
                  style="width: 20px; margin-right: 5px"
                  src="../../assets/img/head.png"
                  alt="共享人"
                />
                <i class="el-icon-circle-plus"></i>
              </td>
              <td>--</td>
            </tr>
          </table>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="联系人资料" name="data">
            <h6
              class="operable"
              @click="visualizationList.basic = !visualizationList.basic"
            >
              <i
                :class="
                  visualizationList.basic
                    ? 'el-icon-caret-bottom'
                    : 'el-icon-caret-top'
                "
              ></i
              >基础信息<el-button
                v-if="visualizationList.basic"
                style="float: right"
                @click.stop="showEditer(1)"
                type="primary"
                size="mini"
                >编辑</el-button
              >
            </h6>
            <el-descriptions v-if="visualizationList.basic" :column="2">
              <el-descriptions-item label="联系人名称">{{
                detailsData.name !== "" ? detailsData.name : "--"
              }}</el-descriptions-item>
              <el-descriptions-item label="标签">{{
                detailsData.tag_name !== "" ? detailsData.tag_name : "--"
              }}</el-descriptions-item>
              <el-descriptions-item label="企业">{{
                detailsData.customer_name !== ""
                  ? detailsData.customer_name
                  : "--"
              }}</el-descriptions-item>
              <el-descriptions-item label="电话">
                {{ detailsData.phone !== "" ? detailsData.phone : "--" }}
              </el-descriptions-item>
              <el-descriptions-item label="职务">{{
                detailsData.position !== "" ? detailsData.position : "--"
              }}</el-descriptions-item>
              <el-descriptions-item label="来源">{{
                detailsData.source_title !== ""
                  ? detailsData.source_title
                  : "--"
              }}</el-descriptions-item>
              <el-descriptions-item label="地址">{{
                detailsData.address !== "" ? detailsData.address : "--"
              }}</el-descriptions-item>
              <el-descriptions-item label="生日">{{
                detailsData.birthday !== "" ? detailsData.birthday : "--"
              }}</el-descriptions-item>
              <el-descriptions-item label="email">{{
                detailsData.email !== "" ? detailsData.email : "--"
              }}</el-descriptions-item>
              <el-descriptions-item label="性别">{{
                detailsData.sex == 1 ? "男性" : "女性"
              }}</el-descriptions-item>
              <el-descriptions-item label="身份证">{{
                detailsData.id_card !== "" ? detailsData.id_card : "--"
              }}</el-descriptions-item>
              <el-descriptions-item label="微信号">{{
                detailsData.wx !== "" ? detailsData.wx : "--"
              }}</el-descriptions-item>
              <el-descriptions-item label="备注">{{
                detailsData.remark !== "" ? detailsData.remark : "--"
              }}</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="跟进记录" name="salesleads">
            <el-table
              :data="detailsData.follow"
              class="ellipsis"
              style="width: 100%"
            >
              <el-table-column prop="user_name" label="跟进人" width="120">
              </el-table-column>
              <el-table-column prop="content" label="跟进状态" width="120">
              </el-table-column>
              <el-table-column prop="follow_time" label="预计完成日期" width="150">
              </el-table-column>
              <el-table-column label="跟进内容">
                <template slot-scope="scope">
                  <span :title="scope.row.content">{{
                    scope.row.content !== "" ? scope.row.content : "--"
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="add_time" label="创建时间" width="150">
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="销售机会" name="followup">
            <el-table
              :data="detailsData.sales"
              class="ellipsis"
              style="width: 100%"
            >
              <el-table-column label="机会名称" width="160">
                <template slot-scope="scope">
                  <span :title="scope.row.title">{{
                    scope.row.title !== "" ? scope.row.title : "--"
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="负责人" width="120">
                <template slot-scope="scope">
                  <span :title="scope.row.user_name">{{
                    scope.row.user_name !== "" ? scope.row.user_name : "--"
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="预计成单日期" width="150">
                <template slot-scope="scope">
                  <span :title="scope.row.expect_date">{{
                    scope.row.expect_date !== "" ? scope.row.expect_date : "--"
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="竞争对手" width="120">
                <template slot-scope="scope">
                  <span :title="scope.row.competitor">{{
                    scope.row.competitor !== "" ? scope.row.competitor : "--"
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="竞争对手描述" width="230">
                <template slot-scope="scope">
                  <span :title="scope.row.competitor_remark">{{
                    scope.row.competitor_remark !== ""
                      ? scope.row.competitor_remark
                      : "--"
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="关键字" width="100">
                <template slot-scope="scope">
                  <span :title="scope.row.keywords">{{
                    scope.row.keywords !== "" ? scope.row.keywords : "--"
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="商品" width="160">
                <template slot-scope="scope">
                  <span :title="scope.row.goods">{{
                    scope.row.goods !== "" ? scope.row.goods : "--"
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="备注" width="230">
                <template slot-scope="scope">
                  <span :title="scope.row.remark">{{
                    scope.row.remark !== "" ? scope.row.remark : "--"
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="创建时间" width="150">
                <template slot-scope="scope">
                  <span :title="scope.row.create_time">{{
                    scope.row.create_time !== "" ? scope.row.create_time : "--"
                  }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
    <el-dialog
      title="设置共享人"
      :visible.sync="addshares"
      width="45%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div style="display: flex; justify-content: space-evenly">
        <div class="shuttle">
          <h6>共享人</h6>
          <div class="s_tree">
            <el-tree
              v-loading="shareing"
              node-key="id"
              :key="treekey"
              :data="contactsList"
              :props="defaultProps"
              accordion
              show-checkbox
              :default-checked-keys="ckold"
              @check-change="handleCheckChange"
              :check-on-click-node="true"
              :check-strictly="true"
              :default-expanded-keys="initexpansion"
            >
            </el-tree>
          </div>
        </div>
        <div class="shuttle">
          <h6>已选共享人</h6>
          <div class="s_tree">
            <el-tree
              :key="treecancekey"
              :data="detailsData.share_user"
              :props="defaultProps"
              accordion
            >
            </el-tree>
          </div>
        </div>
      </div>
      <div class="foot_btn">
        <el-button @click="shareClose">取消</el-button>
        <el-button type="primary" @click="shareSubmit">提交</el-button>
      </div>
    </el-dialog>
    <contacts ref="contacts" :detailsData="detailsData" :start="1"></contacts>
    <!-- 问题点 -->
    <details-enterprise
      ref="detailsEnterprise"
      :parentdetails="detailsId"
      :isreturn="1"
    ></details-enterprise>
  </div>
</template>

<script>
import contacts from "./addCustomerData.vue";
export default {
  name: "detailsContacts",
  props: ["parentdetails","isreturn"],
  components: {
    contacts,
    detailsEnterprise: () => import('./detailsEnterprise.vue'),
  },
  data() {
    return {
      // 穿梭框
      detailsData: [],
      ckold: [], // 过去选中的共享人
      initexpansion: [],
      defaultProps: {
        children: "childlist",
        label: "name",
      },
      loading: false,
      cDetails: false,
      activeName: "data",
      detailsId: "", // 企业id
      // 信息显隐状态
      visualizationList: {
        basic: true,
      },
      addshares: false, // 共享人对话框状态
      shareing: false,
      sharesData: [], // 共享人内容
      contactsList: [], // 共享人下拉数据
      treekey: 0,
      treecancekey: 0,
    };
  },
  watch: {
    cDetails(newData, oldData) {
      if (newData) {
        this.getobject();
      }
    },
  },
  created() {},
  methods: {
    // 左侧选中数据
    handleCheckChange(data, checked, indeterminate) {
      if (checked) {
        this.detailsData.share_user.push(data);
      } else {
        for (let i = 0; i < this.detailsData.share_user.length; i++) {
          if (this.detailsData.share_user[i].id == data.id) {
            this.detailsData.share_user.splice(i, 1);
          }
        }
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 查看详情
    getobject() {
      this.$cmsapi.findContacts(this.parentdetails).then(
        (res) => {
          if (res.code == 0) {
            for (let i = 0; i < res.data.length; i++) {
              for (const key in res.data[i]) {
                if (!res.data[i][key] && res.data[i][key] !== 0) {
                  res.data[i][key] = "";
                }
              }
            }
            this.detailsData = res.data;
            console.log(this.detailsData);
          } else {
            this.$message.error(res.msg);
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    // 查看企业详情
    detailscustomer() {
      this.detailsId = this.detailsData.customer_id;
      this.$refs.detailsEnterprise.cDetails = true;
    },
    // 设计共享人
    setshare() {
      this.getcontacts();
      this.addshares = true;
    },
    // 获取组织架构人员列表
    getcontacts() {
      this.shareing = true;
      this.$cmsapi.departmentList().then(
        (res) => {
          if (res.code == 0) {
            for (let i = 0; i < res.data.length; i++) {
              res.data[i].disabled = true;
              if (res.data[i].childlist) {
                for (let j = 0; j < res.data[i].childlist.length; j++) {
                  var number_bm = res.data[i].childlist.length;
                  var number_ry = 0;
                  res.data[i].childlist[j].disabled = true;
                  // 通过部门ID寻找所属人员并赋值
                  this.$cmsapi
                    .departmentUserList({
                      department_id: res.data[i].childlist[j].id,
                    })
                    .then(
                      (resCilder) => {
                        if (resCilder.code == 0) {
                          // 将数据添加到对应数组
                          res.data[i].childlist[j].childlist = resCilder.data;
                          number_ry = number_ry + 1;
                          if (number_ry == number_bm) {
                            this.contactsList = res.data;
                            this.relationData();
                          }
                        } else {
                          this.$message.error(resCilder.msg);
                        }
                      },
                      (err) => {
                        console.log(err);
                      }
                    );
                }
              }
            }
          } else {
            this.$message.error(res.msg);
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    // 处理树结构数据关联-用于共享人树结构展开
    relationData() {
      // 顶层
      for (let i = 0; i < this.contactsList.length; i++) {
        this.contactsList[i].id = this.guid();
        this.initexpansion.push(this.contactsList[i].id);
        // 部门
        if (this.contactsList[i].childlist) {
          for (let j = 0; j < this.contactsList[i].childlist.length; j++) {
            this.contactsList[i].childlist[j].id = this.guid();
            this.contactsList[i].childlist[j].parentid =
              this.contactsList[i].id;
            // 人员
            if (this.contactsList[i].childlist[j].childlist) {
              for (
                let k = 0;
                k < this.contactsList[i].childlist[j].childlist.length;
                k++
              ) {
                this.contactsList[i].childlist[j].childlist[k].parentid =
                  this.contactsList[i].childlist[j].id;
              }
            }
          }
        }
      }
      for (let i = 0; i < this.detailsData.share_user.length; i++) {
        this.ckold.push(this.detailsData.share_user[i].id);
      }
      this.shareing = false;
    },
    // 获取随机的id数据
    guid() {
      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
        /[xy]/g,
        function (c) {
          var r = (Math.random() * 16) | 0,
            v = c == "x" ? r : (r & 0x3) | 0x8;
          return v.toString(16);
        }
      );
    },
    // 共享人窗口关闭
    shareClose() {
      this.ckold = this.$options.data().ckold;
      this.getobject();
      this.addshares = false;
    },
    // 共享人数据提交
    shareSubmit() {
      let sub_userid = "";
      for (let i = 0; i < this.detailsData.share_user.length; i++) {
        if (sub_userid == "") {
          sub_userid = this.detailsData.share_user[i].userid;
        } else {
          sub_userid = sub_userid + "," + this.detailsData.share_user[i].userid;
        }
      }
      let param = {
        share_userid: sub_userid,
        contacts_id: this.detailsData.id,
      };
      this.$cmsapi.addShare(param).then(
        (res) => {
          if (res.code == 0) {
            this.$message({
              message: "操作成功",
              type: "success",
            });
            this.ckold = this.$options.data().ckold;
            this.getobject();
            this.addshares = false;
          } else {
            this.$message.error(res.msg);
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    // 新增编辑
    showEditer(index, obj) {
      if (index == 0) {
        this.detailsData = this.$options.data().detailsData;
      }
      this.$refs.contacts.drawer = true;
    },
  },
};
</script>

<style scoped>
/* 穿梭框 */
h3,
h6 {
  background: #f8f9fa;
  line-height: 25px;
  padding: 10px;
  margin: 10px 0 !important;
}
.shuttle {
  width: 45%;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  min-width: 100px;
  padding: 10px;
}
.s_tree {
  height: 236px;
  overflow: hidden;
  overflow-y: auto;
}
</style>>